<template>
  <div style="overflow:scroll;">
    <mt-loadmore  :bottom-method="loadBottom" :auto-fill="true" :bottom-all-loaded="allLoaded" ref="loadmore">
      <filte :filterobj='filterobj'></filte>
      <list :list='NewItems' :flage='true' v-if='NewItems.length > 0'></list>
      <div class="oldlist" v-if='PassItems.length > 0'>近期好货</div>
      <list :list='PassItems' :flage='false' v-if='PassItems.length > 0'></list>
    </mt-loadmore>
  </div>
</template>

<script>
const imgutil = require('../../common/until.js')
import { Loadmore, Indicator } from 'mint-ui'
import list from '../compontents/list'
import filte from '../compontents/filte'
export default {
  name: 'detailList',
  data () {
    return {
      allLoaded: false,
      NewItems: [],
      PassItems: [],
      tempList: [],
      keyword: this.$route.query.keyword,
      pageIndex: 1,
      pageSize: 20,
      rid: this.$route.query.rid,
      valueIDS: this.$route.query.valueIDS,
      displayMode: 0,
      filterobj: {AreaID :2,Datas:JSON.stringify({ID:this.$route.query.rid,Keyword:this.$route.query.keyword,valueIDS: this.$route.query.valueIDS})}
    }
  },
  computed: {
    sort(){
      return this.$store.getters.getSort || 0
    },
    filterValues(){
      return this.$store.getters.getFilterValues || {}
    },
  },
  created: function () {
    this.init(1)
  },
  mounted: function(){

  },
  methods: {
    loadBottom:function(){
      this.init(2)
      
    },
    init: function(type){
      const that = this
      if(type == 1) {
        Indicator.open()
        
      }
      
      let datObj = {
        keyword:that.keyword,
        pageIndex:that.pageIndex,
        pageSize:that.pageSize,
        rid:that.rid,
        valueIDS:that.valueIDS,
        sort:that.sort,
        displayMode:that.displayMode,
        filterValues:JSON.stringify(that.filterValues)
      }
      that.$http('/pinhuoitem/SearchV2',datObj,function(res){
        if(type == 1){
          Indicator.close()
        }
        if(res.Result){
          if(type == 1){
            res.Data.SortMenus.map(item => {
              item.selected = true;
              if((that.sort == 4 && item.Value == 5) || (that.sort == 5 && item.Value == 4)) {
                item.selected = false;
              }else if(that.sort !== 4 && that.sort !== 5) {
                if(item.Value == 5) {
                  item.selected = false;
                }
              }
            })
            //that.$store.commit('changeMenus',[])
            that.$store.commit('changeMenus',res.Data.SortMenus)
          }else if(type == 2){
            that.$refs.loadmore.onBottomLoaded()
          } else if( type == 3){
            Indicator.close()
            that.NewItems = []
            that.PassItems = []
            that.tempList = []
            that.allLoaded = false
            document.body.scrollTop = 0
            document.documentElement.scrollTop = 0
          }
          res.Data.NewItems.map(item => {
            item.Cover = imgutil.getUrl(item.Cover, 300)
          })
          res.Data.PassItems.map(item => {
            item.Cover = imgutil.getUrl(item.Cover, 300)
          })
          if(that.displayMode == 0){
            if(res.Data.NewItems.length == that.pageSize){
              that.NewItems = res.Data.NewItems
              that.tempList = res.Data.PassItems;
              that.displayMode = 1;
              that.allLoaded = false;
              that.pageIndex = 2;
            }else if(res.Data.NewItems.length < that.pageSize && res.Data.PassItems.length == that.pageSize){
              that.NewItems = res.Data.NewItems
              that.PassItems = res.Data.PassItems;
              that.displayMode = 2;
              that.allLoaded = false;
              that.pageIndex = 2;
            }else{
              that.NewItems = res.Data.NewItems
              that.PassItems = res.Data.PassItems;
              that.displayMode = 2;
              that.allLoaded = true;
              that.pageIndex = 2;
            }
          }else if(that.displayMode == 1){
            if(res.Data.NewItems.length == that.pageSize){
              that.NewItems = that.NewItems.concat(res.Data.NewItems)
              that.displayMode = 1
              that.allLoaded = false
              that.pageIndex++
            }else if(that.tempList.length == that.pageSize){
              that.NewItems = that.NewItems.concat(res.Data.NewItems)
              that.PassItems = that.tempList
              that.displaymode = 2
              that.allLoaded = false
              that.pageIndex = 2
            }else{
              that.NewItems = that.NewItems.concat(res.Data.NewItems)
              that.PassItems = that.tempList
              that.displayMode = 2
              that.allLoaded = true
              that.pageIndex = 2
            }
          }else if(that.displayMode == 2){
            if(res.Data.PassItems.length == that.pageSize){
              that.PassItems = that.PassItems.concat(res.Data.PassItems)
              that.displayMode = 2
              that.allLoaded = false
              that.pageIndex++
            }else{
              that.PassItems = that.PassItems.concat(res.Data.PassItems)
              that.allLoaded = true
              that.pageIndex++
            }
          }
        }
      },'GET')
    }
  },
  watch:{
    'filterValues': function(){
      Indicator.open()
      this.pageIndex = 1
      this.displayMode = 0
      this.init(3)
    },
    'sort': function(){
      Indicator.open()
      this.pageIndex = 1
      this.displayMode = 0
      this.init(3)
    }
  },
  components:{
    list,
    filte,
    Loadmore
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .oldlist{width: 100%;text-align: center;padding: 10px;font-size: 16px;color:red;font-weight: bold;}
</style>
